<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>stacktable.js</title>
  <meta name="description" content="The responsive tables jQuery plugin for stacking tables on small screens">
  <link href="css/style.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
  <link href="stacktable.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
  <header>
    <h1><img src="stacktable.png" class="logo" />stacktable.js</h1>
    <h3>jQuery plugin for stacking tables on small screens</h3>
    <div id="author">
      <div class="follow-btn">
        <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=johnpolacek&amp;show_count=false&amp;show_screen_name=true&amp;size=l" class="twitter-follow-button" style="width: 169px; height: 28px; margin:1em auto;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
      </div>
      <p>Made in <a href="http://chicagotechevents.com">Chicago</a> by <a href="https://twitter.com/johnpolacek" target="_blank">John Polacek</a></p>
    </div>
  </header>

  <p>The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.</p>
  
  <p><strong>2021 Update</strong><br/>9 years later, I recommend using all or mostly pure CSS for this kind of thing. See <a href="https://codepen.io/scottjehl/pen/abJrPOP?editors=1100">this for example</a>.</p>

  <h2>Download</h2>
  <p>Source files <a href="https://github.com/johnpolacek/stacktable.js/" target="_blank">on github</a> or <a href="https://github.com/johnpolacek/stacktable.js/zipball/master/" target="_blank">download the zip</a>.</p>

  <h2>How to Use</h2>

  <p>Call the plugin on a table.</p>

  <h2>Simple Example <a id="run" href="#">run »</a></h2>
  <pre>$('#simple-example-table').stacktable();</pre>

  <table id="simple-example-table" cellspacing="0">
    <tbody>
      <tr align="left">
        <th width="30%">Stuff</th>
        <th width="12%">Rate</th>
        <th width="12%">Amount</th>
        <th width="12%">Points</th>
        <th width="12%">Number</th>
        <th width="18%">Type</th>
        <th width="12%">Name</th>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <th>5</th>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>
      <tr>
        <th colspan="7" class="sub">Subgroup Header</th>
      </tr>
      <tr>
        <td>Another Thing</td>
        <td>3.375%</td>
        <td>$563.12</td>
        <th>222</th>
        <td>60</td>
        <td>Gym Shoe</td>
        <td>George</td>
      </tr>
      <tr>
        <td>Thing w/Less Stuff</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Harmonica</td>
        <td>Helga</td>
      </tr>
      <tr>
        <td>Last Thing</td>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>Meaning of Life</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <h2>Responsive</h2>

  <p>Use media queries to toggle the visibility of the original table and the stacktable (check out the stacktable.css example). You can pass in classes or an id to give to the stacktable. Adjust the size of your browser window to see it in action in the example below.</p>

  <pre>$('#responsive-example-table').stacktable({myClass:'your-class-name'});</pre>

  <table id="responsive-example-table" class="large-only" cellspacing="0">
    <tbody>
      <tr align="left">
        <th width="30%">Stuff</th>
        <th width="12%">Rate</th>
        <th width="12%">Amount</th>
        <th width="12%">Points</th>
        <th width="12%">Number</th>
        <th width="18%">Type</th>
        <th width="12%">Name</th>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <td>5</td>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>
      <tr>
        <td colspan="7" class="sub">Subgroup Header</td>
      </tr>
      <tr>
        <td>Another Thing</td>
        <td>3.375%</td>
        <td>$563.12</td>
        <td>222</td>
        <td>60</td>
        <td>Gym Shoe</td>
        <td>George</td>
      </tr>
      <tr>
        <td>Thing w/Less Stuff</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Harmonica</td>
        <td>Helga</td>
      </tr>
      <tr>
        <td>Last Thing</td>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>Meaning of Life</td>
        <td></td>
      </tr>
    </tbody>
  </table>


  <h2>Options</h2>

  <p>
    <strong>myClass:</strong> Space separated classes to add to the table.<br/>
    <strong>headIndex:</strong> Use this to specify the row index of the header, in case it isn’t the first.
  </p>


  <h2>Card Table</h2>
  <p>Card table works similarly to stack table except it breaks each row into its own table. The row tables function like cards. Any content left in tfoot is also broken into its own card, this allows for things like view all links or pagination to be easily used.</p>

  <pre>$('#responsive-card-table-example').cardtable();</pre>

  <table id="card-table" class="table">
    <thead>
    <tr>
       <th width="30%">Name</th>
       <th width="30%">Phone</th>
       <th width="30%">Info</th>
       <th width="10%">Actions</th>
    </tr>
   </thead> 
   <tbody>
    <tr>
      <td>
        Test
      </td>
      <td>
        555-555-5555
      </td>
      <td>
        I am a test
      </td>
      <td>
        <a href="#">Edit</a>
      </td>
    </tr>
    <tr>
      <td>
        Greg
      </td>
      <td>
        555-555-5555
      </td>
      <td>
        This is an example
      </td>
      <td>
        <a href="#">Edit</a>
      </td>
    </tr>
    <tr>
      <td>
        John
      </td>
      <td>
        444-444-4444
      </td>
      <td>
        Tables are cool
      </td>
      <td>
        <a href="#">Edit</a>
      </td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
    <td colspan="4">
      <a href="#">View all</a>
    </td>
    </tr>
   </tfoot>

  </table> 


  <h2>StackColumns</h2>
  <p>An alternative responsive design creates a copy of the table into a 2 column key/value format that preserves the columns of the original table. We call it <em>stackcolumns</em> to contrast with the default <em>stacktables</em> that preserves the lines of the original table.</p>

  <pre>$('#responsive-stackcolumns-example').stackcolumns();</pre>

  <table id="agenda-example">
  <!-- thead not supported by stacktable yet; neither is <th> in <tbody>; but the later is working in stackcolumns.
    <thead>
    <tr>
       <th>Time</th>
       <th>Day 1</th>
       <th>Day 2</th>
    </tr>
   </thead> 
   <tfoot>
    <tr>
       <td>night</td>
       <td>rest</td>
       <td>party</td>
    </tr>
   </tfoot> -->
   <tbody>
    <tr>
       <th>Time</th>
       <th>Day 1</th>
       <th>Day 2</th>
       <th>Day 3</th>
       <th>Day 4</th>
    </tr>
    <tr>
       <td>8 AM</td>
       <td style="text-align:center; background:#DFD" colspan="2">breakfast</td>
       <td style="text-align:center; background:#FDD" colspan="2"> ------ </td>
    </tr>
    <tr>
       <td>10 AM</td>
       <td>work</td>
       <td>work</td>
       <td style="text-align:center; background:#DDF" colspan="2">breakfast</td>     
    </tr>
    <tr>
      <th>12AM</th>
      <td style="text-align:center; " colspan="3">lunch</td>
      <td>run</td>
    </tr>
    <tr>
       <td>1 PM</td>
       <!--<td  rowspan="2" style="text-align:center; background:#DDF">work <br/>& read</td> <!-- not supported by tablestack yet -->
       <td>work <br/>
       <td>work <br/>
       <td>beach</td>
       <td class="sub">lunch</td>
    </tr>
    <tr>
       <td>4 PM</td>
       <td>work <br/>
       <td>beach</td>
       <td>beach</td>
       <td>bike</td>
    </tr>
    <tr>
       <td>night</td>
       <td>rest</td>
       <td>rest</td>
       <td>party</td>
       <td>rest</td>
    </tr>
   </tbody>
  </table> 

  <img src="resize.png" id="resize-graphic" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js"><\/script>')</script> </script>

<script src="stacktable.js" type="text/javascript"></script>

<script>
  $(document).on('click', '#run', function(e) {
    e.preventDefault();
    $('#simple-example-table').stacktable();
    $(this).replaceWith('<span>ran - resize your window to see the effect</span>');
  });
  $('#responsive-example-table').stacktable({myClass:'your-custom-class'});
  $('#card-table').cardtable();
  $('#agenda-example').stackcolumns();
</script>

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2821890-9']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

</body>
</html>
